const baseUrl = 'http://api-breakingnews-web.itheima.net'

// pagenum	是	int	页码值
// pagesize	是	int	每页显示多少条数据
// cate_id	否	string	文章分类的 Id
// state	否	string	文章的状态，可选值有：已发布、草稿
// const query = {
//     pagenum: 1,
//     pagesize: 2,
//     cate_id: '', //空的话查询所有状态
//     state: ''//空的话查询所有状态
// }
/* let total = 0 //文章列表的总数
//1.=================== 渲染数据==================
function getList() {
    axios.get(`${baseUrl}/my/article/list`, {
        params: query,
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(res => {
        // console.log(res);
        //获取数据并渲染
        let { data, status } = res.data
        if (status === 0) {
            //清空数据
            $(".layui-table tbody").empty()
            data.forEach(obj => {
                let theTr = `<tr>
                                <td>${obj.title}</td>
                                <td>${obj.cate_name}</td>
                                <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
                                <td>${obj.state}</td>
                                <th>
                                <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                                    </th>
                            </tr>`;
                $(".layui-table tbody").append(theTr);
            })
            //获取返回来的总记录数
            total = res.data.total
            //分页 渲染完才分页
            setPage()
        }
    })
}
getList()

//2.================渲染分类数据==================
function load() {
    axios.get(`${baseUrl}/my/article/cates`, {
        headers: {
            Authorization: localStorage.getItem('token')
        }
    }).then(res => {
        if (res.data.status === 0) {
            $('tbody').empty()
            const { data } = res.data
            $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类
            data.forEach(obj => {
                var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
                $("select[name=category]").append(theOption);
            })
            // 让layui刷新一下form表单
            layui.form.render('select', 'category');
        }
    })
}
load()

// 3.===============根据分类以及状态查找数据==================
$('.layui-btn').on('click', e => {
    e.preventDefault()
    const category = $('select[name="category"]').val()
    const state = $('select[name="state"]').val()
    query.cate_id = category
    query.state = state
    //重新渲染
    getList()
})

// 4.=================分页=================

function setPage() {
    let laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page', // 分页所在的容器标签的ID, 不需要#
        count: total, // 数据总数，从服务端得到
        limit: query.pagesize, // 每页显示的条数
        limits: [2, 3, 5, 10], // 下拉组件每个条数
        layout: ['count', 'prev', 'page', 'next', "limit", "skip"],
        curr: query.pagenum, // setPage只要调用, 分页器就会重新生成, 所以要设置起始页
        jump: function (obj, first) { // 3. 分页改变时, 回调这个函数执行
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数
            // laypage.render每次调用初始化分页器, 会让jump马上触发, 调用load后, setPage又调用. laypage.render有执行, jump又调用, load --- 循环卡死. 
            // 首次不执行 -第一次渲染这个分页器的时候first是true, 其他时候是undefined
            if (!first) {
                query.pagenum = obj.curr; // 把页面同步到参数q对象身上
                query.pagesize = obj.limit; // 同步选中当前页有多少条数据到q对象身上
                getList();
            }
        }
    });
}
//=================删除文章=================
$('tbody').on('click', '.del', function () {
    let id = $(this).attr('myid')
    layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
        axios.get(`${baseUrl}/my/article/delete/${id}`, {
            headers: {
                Authorization: localStorage.getItem('token')
            }
        }).then(res => {
            if (res.data.status === 0) {
                $(this).parents('tr').remove()
                getList()
            }
        })
        layer.close(index);
    });

}) */


// ----------------------------1.渲染数据到页面---------------------------
const query = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '', //空的话查询所有状态
    state: ''//空的话查询所有状态
}
let total
function getList(){
    // axios.get(`${baseUrl}/my/article/list`,{
    //     params:query,
    //     headers: {
    //         Authorization: localStorage.getItem('token')
    //     }
    // }).then(res=>{
    //     // console.log(res);
    //     if(res.data.status === 0){
    //         $(".layui-table tbody").empty()
    //         const {data} =res.data
    //         data.forEach(obj => {
    //             let theTr = `<tr>
    //                             <td>${obj.title}</td>
    //                             <td>${obj.cate_name}</td>
    //                             <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
    //                             <td>${obj.state}</td>
    //                             <th>
    //                             <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
    //                                 </th>
    //                         </tr>`;
    //             $(".layui-table tbody").append(theTr);
    //         });
    //         //总记录数
    //         total = res.data.total
    //         setPage()
    //     }
    // })
    getListApi(query,res=>{
              if(res.data.status === 0){
            $(".layui-table tbody").empty()
            const {data} =res.data
            data.forEach(obj => {
                let theTr = `<tr>
                                <td>${obj.title}</td>
                                <td>${obj.cate_name}</td>
                                <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
                                <td>${obj.state}</td>
                                <th>
                                <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                                    </th>
                            </tr>`;
                $(".layui-table tbody").append(theTr);
            });
            //总记录数
            total = res.data.total
            setPage()
        }
    })
}
getList()
// ----------------------------2.筛选数据.渲染数据到页面---------------------------
// axios.get(`${baseUrl}/my/article/cates`,{
//     headers: {
//         Authorization: localStorage.getItem('token')
//     }
// }).then(res=>{
//     // console.log(res);
//     // <option value="已发布">已发布</option>
//     if(res.data.status ===0){
//         const {data} = res.data
//         $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`)
//         data.forEach(obj=>{
//             let opt =$(`<option value="${obj.Id}">${obj.name}</option>`)
//             $('select[name=category]').append(opt)
//         })
//       layui.form.render('select', 'category')
//     }
// })
cateMethod(res=>{
        if(res.data.status ===0){
        const {data} = res.data
        $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`)
        data.forEach(obj=>{
            let opt =$(`<option value="${obj.Id}">${obj.name}</option>`)
            $('select[name=category]').append(opt)
        })
      layui.form.render('select', 'category')
    }
})
// ---------------------------------根据分类查询数据-------------------
$('.layui-btn').on('click', e => {
    e.preventDefault()
    const category = $('select[name="category"]').val()
    const state = $('select[name="state"]').val()
    query.cate_id = category
    query.state = state
    //重新渲染
    getList()
})
//-------------------------------------分页----------------------------
function setPage() {
    let laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'page', // 分页所在的容器标签的ID, 不需要#
        count: total, // 数据总数，从服务端得到
        limit: query.pagesize, // 每页显示的条数
        limits: [2, 3, 5, 10], // 下拉组件每个条数
        layout: ['count', 'prev', 'page', 'next', "limit", "skip"],
        curr: query.pagenum, // setPage只要调用, 分页器就会重新生成, 所以要设置起始页
        jump: function (obj, first) { // 3. 分页改变时, 回调这个函数执行
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数
            // laypage.render每次调用初始化分页器, 会让jump马上触发, 调用load后, setPage又调用. laypage.render有执行, jump又调用, load --- 循环卡死. 
            // 首次不执行 -第一次渲染这个分页器的时候first是true, 其他时候是undefined
            if (!first) {
                query.pagenum = obj.curr; // 把页面同步到参数q对象身上
                query.pagesize = obj.limit; // 同步选中当前页有多少条数据到q对象身上
                getList();
            }
        }
    });
}
//-------------------------------------删除----------------------------
$('tbody').on('click','.del',e=>{
    const id = e.target.getAttribute('myid')
    layer.confirm('您确定想删除吗....?', {icon: 3, title:'温馨提示'}, function(index){
        //do something
        // axios.get(`${baseUrl}/my/article/delete/${id}`,{
        //     headers: {
        //         Authorization: localStorage.getItem('token')
        //     }
        // }).then(res=>{
        //     if(res.data.status === 0){
        //         getList()
        //     }
        // })
        delMethod(id,res=>{
            if(res.data.status === 0){
                        getList()
                    }
        })
        layer.close(index);
      });

})



